<template>
  <div class="demo3_page">
    <van-nav-bar
      title="测试demo3"
      left-arrow
      @click-left="$router.push('/')"
    />

    <van-dropdown-menu>
      <van-dropdown-item v-model="value" :options="option" />
      <van-dropdown-item title="地址" ref="item">

        <van-cell center title="全部（不限）">
          <template #right-icon>
            <van-checkbox v-model="allAddress"></van-checkbox>
          </template>
        </van-cell>

        <van-checkbox-group v-model="result">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in list"
              clickable
              :key="item"
              :title="`${item}`"
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox :name="item" ref="checkboxes" shape="square" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </van-dropdown-item>

    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  name: "demo3",
  data() {
    return {
      list: ['上班地址', '面试地址', '招企地址'],
      result: [],

      value: 0,
      allAddress: true,
      switch1: false,
      switch2: false,
      switch3: false,
      option: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },

    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
  },
}
</script>

<style scoped>

</style>
